<template>
  <Dialog width="800px" :footer="false" title="批量转音" v-model="dialogVisible">
    <div class="first-step-content" v-if="curStep === EnumStep.FIRST">
      <h2>你⼀共选择了{{textIdList.length}}条语句，请选择你⽣成 ⾳频的声纹</h2>
<!--      <p >只能选择已经创建完成的角色（必须已上传音色文件）</p>-->
      <div >
        选择声纹:
        <el-select style="width:300px;" filterable multiple v-model="formData.audioToneIds" placeholder="请输入标签id数组，一个音频可以有多个标签">
          <el-option v-for="item in audioToneList" :key="item.id" :value="item.id" :label="item.name" />
        </el-select>
      </div>
      <el-button :disabled="!formData.audioToneIds.length" size="large" style="margin-top:24px;" @click="submitForm" type="primary" :loading="formLoading">确定选择，开始生成</el-button>
    </div>
    <div class="second-step-content"  v-else-if="curStep === EnumStep.SECOND">
      <h3>
        <p>你⼀共选择了{{textIdList.length}}条语句，</p>
        <p>系统正在为正在为你选择的以下{{formData.audioToneIds.length}}个声纹</p>
        <p>（<span :key="role.value" v-for="role in choosedAudioToneList">{{role.name}}</span>）批量⽣成⾳频中</p>
        <p>需要的时间⽐较久</p>
        <p>可以稍后在⾳频管理⻚⾯查看相关声纹所⽣成的⾳频⽂件</p>
      </h3>
      <p >**所有文本的标签和关键词、回复类型及回复语句会自动生成——无须再次编辑如对生成的音频有任何修改，请在音频管理页逐条查看并修正</p>
      <el-button size="large" style="margin-top:24px;" @click="()=>dialogVisible=false" type="primary">知道了</el-button>
    </div>
  </Dialog>
</template>

<script setup >
import { CosplayApi } from '@/api/lm/cosplay'
import { AudioToneApi } from '@/api/resource/audiotone'
import { AudioTextApi } from '@/api/lm/audiotext'
const dialogVisible = ref(false);
const EnumStep = {
  FIRST: 1,
  SECOND: 2
};
const curStep = ref(EnumStep.FIRST);
const formLoading = ref(false);
const formData = reactive({
  roleIdList: [],
  audioToneIds: []
});
const textIdList = ref([]);
const roleList = ref([]);
const audioToneList = ref([]);
const choosedRoleList = computed(()=> {
  return roleList.value.filter(item=>formData.roleIdList.includes(item.value));
})
const choosedAudioToneList  = computed(()=> {
  return audioToneList.value.filter(item=>formData.audioToneIds.includes(item.id));
})
const open = (options) => {
  textIdList.value = options.textIdList;
  formLoading.value = false;
  dialogVisible.value = true;
  curStep.value = EnumStep.FIRST;
}

const submitForm = ()=> {
  formLoading.value = true;
  AudioTextApi.convertAudio({
    textIds: textIdList.value,
    roleIds: formData.roleIdList,
    audioToneIds: formData.audioToneIds
  }).then(e=> {
    curStep.value = EnumStep.SECOND;
  }).finally(e=> {
    formLoading.value = false;
  });
}

defineExpose({
  open
})

onMounted(()=> {
  // CosplayApi.getCosplayPage({
  //   pageNo: 1,
  //   pageSize: 100
  // }).then(e=> {
  //   roleList.value = e.list.map(item=> {
  //     return {
  //       value: item.id,
  //       label: item.name
  //     }
  //   });
  // });
  AudioToneApi.getAudioTonePage({
    pageNo: 1,
    pageSize: 100
  }).then(e=> {
    audioToneList.value = e.list;
  });
});
</script>

<style lang="scss" scoped>
.first-step-content, .second-step-content {
  text-align: center;
  h3 {
    p {
      margin: 8px 0px;
      line-height: 1;
    }
  }
}
</style>
